<template>
    <div class="main">
        <TheSidebar />
        <SnippetList />
        <SnippetsView />
    </div>
</template>

<script setup lang="ts">
import { store } from '@/electron'
import { track } from '@/services/analytics'
import { useFolderStore } from '@/store/folders'
import { useSnippetStore } from '@/store/snippets'
import { useTagStore } from '@/store/tags'
import { useAppStore } from '@/store/app'
import { computed } from 'vue'
import { emitter } from '@/composable'

const folderStore = useFolderStore()
const snippetStore = useSnippetStore()
const tagStore = useTagStore()
const appStore = useAppStore()

const sidebarWidth = computed(() => appStore.sizes.sidebar + 'px')
const snippetListWidth = computed(() => appStore.sizes.snippetList + 'px')

const init = async () => {
    const storedFolderId = store.app.get('selectedFolderId')
    const storedFolderAlias = store.app.get('selectedFolderAlias')
    const storedSnippetId = store.app.get('selectedSnippetId')

    await folderStore.getFolders()
    await snippetStore.getSnippets()
    await tagStore.getTags()

    if (storedSnippetId) {
        snippetStore.setSnippetById(storedSnippetId)
        appStore.addToHistory(storedSnippetId)
    } else {
        appStore.addToHistory(snippetStore.snippets[0]?.id)
    }

    if (storedFolderId) {
        folderStore.selectId(storedFolderId)
        await snippetStore.setSnippetsByFolderIds()
    }

    if (storedFolderAlias) {
        snippetStore.setSnippetsByAlias(storedFolderAlias)
    }

    emitter.emit('scroll-to:folder', folderStore.selectedId!)

    appStore.isInit = true
}

const addDevtoolsHost = () => {
    if (import.meta.env.DEV) {
        const s = document.createElement('script')
        s.src = 'http://localhost:8098'
        document.head.appendChild(s)
    }
}

addDevtoolsHost()
init()
track('main')
</script>

<style scoped lang="scss">
.main {
    display: grid;
    height: 100vh;
    background-color: var(--color-bg);
    overflow: hidden;
    grid-template-columns: v-bind(sidebarWidth) v-bind(snippetListWidth) 1fr;
}
.update-available {
    position: absolute;
    top: 2px;
    right: var(--spacing-xs);
    font-size: var(--text-xs);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-text);
    &:hover {
        text-decoration: underline;
    }
    z-index: 1020;
}
</style>
